<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用v-on绑定自定义事件</title>
    <script src="../js/vue-dev.js"></script>
</head>
<body>
    <p>
        子组件已经和他的外部完全解耦，他所做的只是报告自己内部的事情，至于父组件是否关心他则与他无关；
    </p>
    <div id="app_event">
        <span>总计为：{{total}}</span><br>
        <button-counter v-on:increment="incrementTotal"></button-counter>
        <button-counter v-on:increment="incrementTotal"></button-counter>
    </div>

    <script>
        Vue.component('buttonCounter',{
            //可以不用prop接收父组件的数据，使用vue的事件系统，向父组件传递数据
            template:'<button v-on:click="incrementCounter">{{counter}}</button>',
            //组件的数据必须以对象的形式返回
            data:function () {
                return {counter:0};
            },
            methods:{
                incrementCounter:function () {
                    this.counter += 1 ;
                    this.$emit('increment') ;
                }
            }
        })
        var app_event = new Vue({
            el:'#app_event',
            data:{
                total:0
            },
            methods:{
                incrementTotal:function () {
                    this.total += 1;
                }
            }
        })

    </script>

</body>
</html>